:host{
    flex-grow: 1;
}

.container{
    width: 1000px;
    margin: 2em auto;
    color: var(--text);
}
h1{
    color: var(--main)
}
h2{
    font-size: 1.1em;
    font-weight: normal; 
}
h3{
    font-weight: normal;
    font-size: 1em;
}
.text-center{
    text-align: center;
}
.intro{
    display: flex;
    & .title{
        flex-basis: 40%;
        & h1{
            width: 80%;
            margin-bottom: 0.4em;
        }
    }
}
a.highlight{
    cursor: pointer;
    color: var(--main);
    &:hover{
        text-decoration: underline;
    }
}
.info-free{
    display: block;
    text-align: right;
}
.components{
    display: flex;
    margin-top: 4em;
    font-size: 19px;
    justify-content: space-evenly;
    & > div{
        flex-basis: 45%;
    }
    & .components-showcase{
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
        align-items: center;
        text-align: center;
        & > div{
            flex-basis: 30%;
            margin-top: 1em;
        }
    }
    & .component-container{
        & .title{
            font-size: 12px;
            margin-bottom: 0.2em;
            display: block;
            color: var(--text-light);
        }
    }
    & .component-body{
        background-color: var(--background-dark);
        padding: 0.5em;
        width: 3em;
        border-radius: 0.3em;
        height: 3em;
        position: relative;
        margin: 0 auto;
        & > .img{
            width: 100%;
            height: 100%;
            display: block;
        }
        &.long{
            width: 6em;
            & img{
                margin-left: 1.5em;
            }
        }
        &.high{
            height: 6em;
            & img{
                margin-top: 1.5em;
            }
            & .port{
                top: 2.5em;
            }
        }
        &.mq{
            display: flex;
            flex-flow: row nowrap;
            gap: 2px;
        }
        & .cell{
            width: 0.55em;
            height: 100%;
            background-color: var(--text);
            opacity: 0.2;
        }
        & .port{
            width: 1em;
            height: 1em;
            border-radius: 50%;
            border: 0.2em solid;
            background-color: var(--background-light);
            position: absolute;
            top: 1em;
            &.left{
                left: -1.25em;
            }
            &.right{
                right: -1.25em;
            }
        }
    }
}
.get-started{
    margin-top: 3.5em;
    text-align: center;
    & h4{
        font-weight: normal;
    }
    .btn-main{
        margin: 1em auto;
    }
}
.showcase-container{
    & h3{
        text-align: center;
        font-size: 1.5rem;
    }
    & .support{
        color: var(--main);
        text-decoration: underline;
        font-size: 0.8rem;
        display: block;
        width: max-content;
        &.right{
            margin-left: auto;
        }
    }
}
.showcase{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1.5em;
    & .showcase-item{
        flex-basis: 10%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        & a{
            display: block;
        }
        & img{
            border-radius: 50%;
            width: 100%;
            object-fit: cover;
            padding-inline: 20%;
        }
        & h5{
            font-size: 1.15em;
            margin-block: 0.5em;
            font-weight: normal;
            text-align: center;
            color: var(--main);
        }
        & .note{
            font-size: 0.85em;
            font-weight: 100;
        }
        &.small{
            flex-basis: 15%;
            font-size: 0.9rem;
        }
        &.medium{
            padding-block: 0.5em;
            flex-basis: 20%;
            font-size: 1.1rem;
        }
        &.big{
            padding-block: 1em;
            flex-basis: 25%;
            font-size: 1.25rem;
        }
    }
    &.contributors {
        gap: 1.5em;
        .showcase-item{
            width: 10%;
        }
        a{
            width: 100%;
        }
        h5{
            color: var(--text);
        }
    }
}

.animation{
    position: relative;
    margin-left: 5em;
    width: 17em;
    & svg{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 11em;
        width: 17em;
        margin-top: -4em;
        & path{
            stroke-width: 3;
        }
        & #anim-data{
            transform: translate(-10px, 0);
            animation: data-anim 3s linear infinite;
        }
    }
}
.caption-dark{
    margin-top: 0.7em;
    color: var(--text-light);
}
.open-source{
    margin-top: 2.5em;
    & img{
        margin: 0.5em;
    }
}
.mt-1{
    margin-top: 0.5em;
}
.mt-2{
    margin-top: 1em;
}

.animation-board-container{
    margin-top: 2em;
    max-width: 800px;
    & .animation-board{
        font-size: 16px;
        & .menu{
            & .main{
                fill: transparent;
                stroke: var(--border);
                stroke-width: 2;
            }
            & .section{
                fill: var(--background);
            }
            & text{
                fill: var(--text);
            }
            & .content{
                transform: translate(5px, 35px);
            }
            & .client{
                & .content{
                    animation: menu-client 12s infinite;
                    -moz-animation: menu-client 12s infinite;
                    }
            }
            & .server{
                animation: menu-server-section 12s infinite;
                -moz-animation: menu-server-section 12s infinite;
                    & .content{
                        animation: menu-server 12s infinite;
                        -moz-animation: menu-server 12s infinite;
                    }
            }
        }
        & .cursor{
            font-size: 20px;
            color: var(--main);
            animation: cursor 12s infinite;
            -moz-animation: cursor 12s infinite;
            &.pointer{
                opacity: 0;
                animation: cursor-hand 12s infinite;
                -moz-animation: cursor-hand 12s infinite;
            }
        }
        & .comp-client{
            animation: comp-client 12s infinite;
            -moz-animation: comp-client 12s infinite;
            & .port{
                animation: port-client 12s infinite;
                -moz-animation: port-client 12s infinite;
            }
        }
        & .comp-api{
            animation: comp-api 12s infinite;
            -moz-animation: comp-api 12s infinite;
            & .port{
                animation: port-api 12s infinite;
                -moz-animation: port-api 12s infinite;
            }
        }
        & .port{
            stroke-width: 2;
            fill: var(--background-light);
        }
        & .connection.drag{
            stroke: var(--main);
            stroke-width: 2;
            stroke-dasharray: 60;
            stroke-dashoffset: 60;
            animation: connection 12s infinite;
            -moz-animation: connection 12s infinite;
    }
        & .connection.full{
            animation: connection-full 12s infinite;
            -moz-animation: connection-full 12s infinite;
            stroke-width: 2;
        }
    }
}

@keyframes cursor {
    0%{
        transform: translate(100px, 100px);
        opacity: 1;
    }
    16%{
        transform: translate(30px, 10px);
    }
    18.9%, 37%, 52.9%, 69%, 74.9%, 90%, 100%{
        opacity: 1;
    }
    19%, 36.9%, 53%, 68.9%, 75%, 89.9%{
        opacity: 0;
    }
    24%{
        transform: translate(25px, 55px);
    }
    36%, 39%{
        transform: translate(275px, 100px);
    }
    48%, 50%{
        transform: translate(25px, 100px);
    }
    56%, 58%{
        transform: translate(105px, 140px);
    }
    68%, 72%{
        transform: translate(400px, 100px);
    }
    76%, 80%{
        transform: translate(308px, 102px);
    }
    88%, 90%{
        transform: translate(370px, 102px);
    }
    96%, 100%{
        transform: translate(320px, 140px);
    }
}

@keyframes cursor-hand {
    0%{
        transform: translate(100px, 100px);
        opacity: 0;
    }
    16%{
        transform: translate(30px, 10px);
    }
    18.9%, 37%, 52.9%, 69%, 74.9%, 90%, 100%{
        opacity: 0;
    }
    19%, 36.9%, 53%, 68.9%, 75%, 89.9%{
        opacity: 1;
    }
    24%{
        transform: translate(25px, 55px);
    }
    36%, 39%{
        transform: translate(275px, 100px);
    }
    48%, 50%{
        transform: translate(25px, 100px);
    }
    56%, 58%{
        transform: translate(105px, 140px);
    }
    68%, 72%{
        transform: translate(400px, 100px);
    }
    76%, 80%{
        transform: translate(308px, 102px);
    }
    88%, 100%{
        transform: translate(370px, 102px);
    }
}

@keyframes comp-client{
    0%, 23.9%{
        opacity: 0;
    }
    24%{
        opacity: 1;
        transform: translate(10px, 40px);
    }
    36%, 100%{
        transform: translate(260px, 85px);
    }
}

@keyframes comp-api{
    0%, 55.9%{
        opacity: 0;
    }
    56%, 58%{
        opacity: 1;
        transform: translate(90px, 125px);
    }
    68%, 100%{
        transform: translate(385px, 85px);
    }
}

@keyframes port-client{
    0%, 36.9%{
        opacity: 0;
    }
    37%, 100%{
        opacity: 1;
    }
}

@keyframes port-api{
    0%, 69.9%{
        opacity: 0;
    }
    70%, 100%{
        opacity: 1;
    }
}

@keyframes menu-client{
    0%, 15.9%{
        opacity: 0;
    }
    16%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes menu-server{
    0%, 49.9%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 1;
    }
}

@keyframes menu-server-section{
    0%, 15.9%{
        transform: translateY(35px);
    }
    16%{
        transform: translateY(85px);
    }
    100%{
        transform: translateY(85px);
    }
}

@keyframes connection {
    0%, 80%{
        stroke-dashoffset: 60;
    }
    88%, 100%{
      stroke-dashoffset: 0;
    }
    89.9%{
        opacity: 1;
    }
    90%, 100%{
        opacity: 0;
    }
}

@keyframes connection-full {
    0%, 89.9%{
        opacity: 0;
    }
    90%, 100%{
        opacity: 1;
    }
}

@-moz-keyframes connection {
    0%, 80%{
        stroke-dashoffset: 60;
    }
    88%, 100%{
      stroke-dashoffset: 0;
    }
    89.9%{
        opacity: 1;
    }
    90%, 100%{
        opacity: 0;
    }
}

@-moz-keyframes connection-full {
    0%, 89.9%{
        opacity: 0;
    }
    90%, 100%{
        opacity: 1;
    }
}


@keyframes data-anim {
    0%, 20.001%, 30%, 50.001%, 60%, 80.001%, 100%{
        transform: translate(-10px, 0);
    }
    10%, 40%, 70%{
        transform: translate(35px, 0);
    }
    10.001%, 40.001%, 70.001%{
        transform: translate(125px, 0);
    }
    20%{
        transform: translate(170px, -75px);
    }
    50%{
        transform: translate(170px, 0);
    }
    80%{
        transform: translate(170px, 75px);
    }

}


@media (max-width: 1024px){
    .showcase.contributors{
        & .showcase-item{
            width: 25%;
            flex-basis: 25%;
        }
    }
    .showcase{
        & .showcase-item.small{
            flex-basis: 20%;
        }
        & .showcase-item.medium{
            flex-basis: 27%;
        }
        & .showcase-item.big{
            flex-basis: 35%;
        }
    }
    .container{
        width: 95%;
    }
    .intro{
        flex-flow: column nowrap;
        text-align: center;
        & .title{
            flex-basis: 100%;
            & h1{
                width: 100%;                
            }
        }
        & .btn-main{
            margin: 0 auto;
        }
    }
    .animation{
        margin: 6em auto 0;
    }
    .components{
        flex-flow: column nowrap;
        text-align: center;
        & .components-showcase{
            margin-bottom: 2em;
        }
    }
    .components-intro{
        flex-flow: row nowrap;
    }
    .info-free{
        text-align: center;
    }
}

@media (max-width: 560px){
    .components{
        & .component-container{
            flex-basis: 40% !important;
        }
    }
    .showcase.contributors{
        & .showcase-item{
            width: 40%;
            flex-basis: 40%;
        }
    }
    .showcase{
        & .showcase-item.small{
            flex-basis: 27%;
        }
        & .showcase-item.medium{
            flex-basis: 35%;
        }
        & .showcase-item.big{
            flex-basis: 45%;
        }
    }
}